@charset "utf-8";

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
img {
	vertical-align: top;
}
// 面板
.panel {
	color: #333;
	background-color: #FFF;

	.panel-head {
		padding: 0 15px;
	}
	.panel-head ~ .panel-head {
		.panel-head-title,
		.panel-head-tabs {
			border-top: 1px solid #EFEFEF;
		}
	}
	.panel-body {
		padding: 15px;
	}
}
.panel-head-title {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 48px;
	border-bottom: 1px solid #EFEFEF;

	small {
		margin-left: 10px;
		color: #BEBEBE;
		font-size: 13px;
		font-weight: 400;
		line-height: 13px;
	}
	.more {
		float: right;
		color: #999;
		font-size: 13px;
		font-weight: 400;
		text-decoration: none;
		transition: all .3s ease-out 0s;

		&:hover {
			color: #4285f4;
		}
	}
}
.panel-head-tabs {
	font-size: 0;
	white-space: nowrap;
	border-bottom: 1px solid #EFEFEF;
	overflow-x: hidden;

	.tab {
		position: relative;
		display: inline-block;
		margin-right: 31px;
		vertical-align: middle;

		a {
			display: block;
			color: #666;
			font-size: 16px;
			font-weight: 400;
			line-height: 48px;
			text-decoration: none;
			border-bottom: 2px solid transparent;
			transition: all .3s ease-out 0s;

			&:hover {
				color: #3CA5F6;
			}
		}
		&.active a {
			color: #3CA5F6;
			font-weight: 500;
			border-bottom-color: #3CA5F6;
		}
		&:last-child {
			margin-right: 0;
		}
	}
}

// 专题
.topic-list {
	font-size: 0;

	li {
		display: inline-block;
		width: 25%;
		padding: 0 6px;
		text-align: center;
		box-sizing: border-box;

		a {
			text-decoration: none;

			div {
				overflow: hidden;
			}
			img {
				width: 100%;
				height: auto;
				transition: 1s;
				transform: translateZ(0) scale(1);

				&:hover {
					transform: translateZ(0) scale(1.2);
				}
			}
			span {
				display: block;
				margin-top: 10px;
				color: #333;
				font-size: 14px;
				line-height: 20px;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-wrap: normal;
			}
		}
	}
}